<template>
  <div class="reply" ref="replyRef">
    <el-steps :active="replyBz" finish-status="success" simple>
      <el-step title="选择头像" icon="Edit"></el-step>
      <el-step title="填写昵称" icon="EditPen"></el-step>
      <el-step title="完成" icon="SuccessFilled"></el-step>
    </el-steps>

    <div class="userimg" v-show="replyBz == 0">
      <div v-for="item in userimg" :class="{ chooseimg: true, activeImg: item == isactive }" :key="item" @click="choose(item)">
        <el-image class="elimg" :src="baseUrl + item" fit="fill" :lazy="true"></el-image>
        <el-icon class="imgChooseBtn iisactive">
          <SuccessFilled />
        </el-icon>
      </div>
    </div>

    <div class="writeUserName" v-show="replyBz == 1">
      <div class="inputBox">
        <el-input maxlength="3" show-word-limit placeholder="请输入昵称" prefix-icon="Avatar" v-model="uerName"> </el-input>
        <el-alert v-show="showAlert" style="margin-top: 10px" title="请输入昵称" type="error" @close="closeAlert"> </el-alert>
      </div>
    </div>

    <div class="end" v-show="replyBz == 2">
      <div class="verify">
        <el-input class="pcInput" maxlength="4" show-word-limit placeholder="请输入验证码" prefix-icon="CaretRight" v-model="vCode"> </el-input>
        <el-input class="mobileInput" maxlength="4" show-word-limit placeholder="请输入验证码" prefix-icon="CaretRight" v-model="vCode"> </el-input>
        <el-alert v-show="showAlertVCode" style="margin-top: 10px" title="请输入验证码" type="error" @close="closeAlertVCode"> </el-alert>
        <div class="captchaImgRef" @click="getCaptcha" ref="captchaImgRef" />
      </div>
    </div>

    <div class="replyResult" v-show="replyBz == 3"></div>
    <div class="btn">
      <div class="btngrup">
        <button :class="{ btnZ: true, showdisable: replyBz == 0 }" @click="back" :disabled="replyBz == 0">上一步</button>
        <button class="btnZ" @click="go" id="go" :disabled="isSubmiting">下一步</button>
        <span class="btnTip" v-if="isSubmiting">{{ time }}秒后再试</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue'
// 该组件为回复文章时的弹框信息
import { uerComments } from './userComments'
import * as msgApi from '@/api/message'
const proxy: ComponentPublicInstance<any> = getCurrentInstance()?.proxy
const $emit = defineEmits(['finish'])
// 回复信息的步骤条
const replyBz = ref(0)
//头像图片数据数组
const userimg = ref([])
//url
const baseUrl = ref('')
//   当前选中的头像
const isactive = ref('1.jpg')
//用户昵称
const uerName = ref('')
// 用户昵称界面的警告框
const showAlert = ref(false)
const showAlertVCode = ref(false)
const vCode = ref('')
const captchaImgRef = ref<any>(null)
const replyRef = ref<any>(null)
const time = ref(0)
const flagTime = ref(60) //倒计时时间固定值
const isSubmiting = ref(false)
const closeAlert = () => {
  showAlert.value = false
}
const closeAlertVCode = () => {
  showAlertVCode.value = false
}
defineExpose({
  clearStep
})
function clearStep() {
  uerName.value = ''
  replyBz.value = 0
}
onMounted(async () => {
  await getCaptcha()
  handelInterval()
  //获取图片列表
  new uerComments().getUserImgList().then((data) => {
    userimg.value = data.list
    baseUrl.value = data.url
  })
})
//   下一步
const go = async () => {
  if (document.querySelector('#go').innerHTML != '完成') {
    if (replyBz.value == 1 && uerName.value == '') {
      return (showAlert.value = true)
    }
    showAlert.value = false
    replyBz.value += 1
    return
  }
  if (document.querySelector('#go').innerHTML == '完成' && vCode.value == '') {
    return (showAlertVCode.value = true)
  }
  showAlertVCode.value = false
  //校验验证码
  let resp = await msgApi.postVerifyCode({ captcha: vCode.value })
  console.log(resp, '<---验证结果')
  //重新获取验证码
  getCaptcha()
  if (!resp) {
    proxy.$showMessage({
      content: '验证码错误',
      type: 'error',
      duration: 3000,
      container: replyRef.value,
      callback: () => {
        sartClock(5)
        isSubmiting.value = true // 正在提交，防止重复点击
        vCode.value = ''
      }
    })
    return
  }
  isSubmiting.value = true // 正在提交，防止重复点击
  localStorage.setItem('replyTkTime', new Date().getTime() + '')
  sartClock(60)
  //将填写的数据发送给父组件
  $emit('finish', {
    userName: uerName.value,
    userImg: isactive.value
  })
  uerName.value = ''
  replyBz.value = 0
  document.querySelector('.el-dialog__headerbtn').click()
}

const back = () => {
  replyBz.value--
}
//验证码获取
async function getCaptcha() {
  vCode.value = ''
  let data = await msgApi.getCaptcha()
  if (captchaImgRef.value) {
    captchaImgRef.value.innerHTML = data
  }
}
//选择了一个头像
const choose = (item) => {
  isactive.value = item
}
watch(
  //监听步骤条数据的改变
  () => replyBz.value,
  (newVal) => {
    if (newVal == 2) {
      document.querySelector('#go').innerHTML = '完成'
    } else {
      document.querySelector('#go').innerHTML = '下一步'
    }
  }
)
//倒计时
function sartClock(duration = 5) {
  isSubmiting.value = true
  time.value = duration
  flagTime.value = duration
  let t = setInterval(() => {
    time.value--
    if (time.value < 0) {
      clearInterval(t)
      time.value = duration
      isSubmiting.value = false
    }
  }, 1000)
}
//保持定时器
function handelInterval() {
  let startTime = localStorage.getItem('replyTkTime')
  if (!startTime) return
  let diffTime = Math.floor((new Date().getTime() - Number(startTime)) / 1000)
  let result = flagTime.value - diffTime
  if (result > 0) {
    sartClock(result)
  }
}
</script>
<style lang="scss" scoped>
.reply {
  height: 50vh;
  position: relative;

  .userimg {
    height: 70%;
    // border: 1px solid #e4e7ed;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    overflow: auto;

    .chooseimg {
      flex: none;
      width: 15%;
      height: 0;
      padding-bottom: 15%;
      position: relative;
      margin-right: 5px;
      margin-bottom: 5px;
      border: 2px solid white;
    }

    .activeImg {
      .iisactive {
        color: red;
      }
    }
  }

  .btngrup {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .btn {
    position: absolute;
    width: 100%;
    bottom: -20;
    right: 0;
    display: flex;
    justify-content: flex-end;
  }
}

.elimg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;
}

.finsh {
  margin-top: 10px;
  height: 70%;
  overflow: auto;

  h1 {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

.end {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;

  h1 {
    text-align: center;
  }
}

.writeUserName {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;

  .inputBox {
    width: 70%;
  }
}

.imgChooseBtn {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  font-size: 20px;
  color: white;
}

.btnZ {
  width: 70px;
  height: 30px;
  border: none;
  color: #409eff;
  margin-right: 5px;
  background-color: white;

  &:hover {
    color: #81c0ff;
  }
}

.btnTip {
  margin-left: 10px;
  color: red;
  font-size: 12px;
}

.showdisable {
  color: #909399;
}

.verify {
  display: flex;
  align-items: center;

  @media screen and (max-width: 768px) {
    flex-direction: column;
  }

  .el-input {
    height: 40px;
    padding: 0 15px;
    outline: none;
  }

  .pcInput {
    @media screen and (max-width: 768px) {
      display: none;
    }
  }

  .mobileInput {
    outline: none;
    display: none;

    @media screen and (max-width: 768px) {
      display: block;
      width: 80%;
    }
  }

  .captchaImgRef {
    width: 150px;
    height: 50px;
    background: #fff;
  }
}

@media (max-width: 768px) {
  .imgChooseBtn {
    font-size: 12px;
  }

  ::v-deep(.el-dialog) {
    --el-dialog-width: 83%;
  }
}
</style>
